<!--
 * @Author: 刘翔
 * @Date: 2025-07-31 14:08:54
 * @LastEditTime: 2025-08-26 14:37:42
 * @LastEditors: your name
 * @Description:页面组合13(超支排名第3科室 整形科-结余变化趋势)
 * @FilePath: \建达文件\ts-demo\ts-demo\src\pptHome\pageList\pageType13.vue
-->
<template>
  <div class="page-type-13">
    <MixedChart style="margin-bottom: 50px" ref="chart1" v-bind="getChartProps1()" />
    <div class="page-type-13-desc">
      <CardBox>
        <template #right>
          <span class="card-box-right-item-1" v-html="desc"></span>
        </template>
      </CardBox>
    </div>
  </div>
</template>

<script>
import MixedChart from '../components/MixedChart.vue';
import CardBox from '../components/cardBox.vue';
export default {
  name: 'pageType13',
  components: {
    MixedChart,
    CardBox,
  },
  props: {
    //图表配置
    chartList1: {
      type: Object,
      default: () => {},
    },
    desc: {
      type: String,
      default: '',
    },
  },
  methods: {
    //获取图表配置
    getChartProps1() {
      let _this = this;
      return {
        // 主系列数据
        primaryData: {
          categories: this.chartList1.data.map(item => item[this.chartList1.XShow]),
          values: this.chartList1.data.map(item => item[this.chartList1.keyList[0]]),
        },
        // 次系列数据
        secondaryData: {
          categories: this.chartList1.data.map(item => item[this.chartList1.XShow]),
          values: this.chartList1.data.map(item => item[this.chartList1.keyList[1]]),
        },
        // 系列类型
        seriesTypes: {
          primary: 'bar',
          secondary: 'line',
        },
        //是否共用Y轴
        shareYAxis: false,
        // 图例配置
        legend: {
          data: this.chartList1.keyList,
        },
        // 图表配置
        chartConfig: {
          height: 800,
          // 图例配置
          legend: {
            data: this.chartList1.keyList,
          },
          // 网格配置
          grid: {
            left: '3%',
            right: '5%',
            bottom: '5%',
            containLabel: true,
          },
          // 坐标轴配置
          axis: {
            // 分类轴配置
            category: {
              axisLabel: {
                color: '#333',
                fontSize: 18,
              },
              nameLocation: 'middle',
              nameGap: 30,
            },
            // 主值轴配置
            primary: {
              name: this.chartList1.keyList[0],
              axisLabel: {
                formatter: '{value}',
                color: this.chartList1.colors[0],
                fontSize: 18,
              },
              nameTextStyle: {
                color: this.chartList1.colors[0],
                fontSize: 12,
              },
            },
            // 次值轴配置
            secondary: {
              name: this.chartList1.keyList[1],
              axisLabel: {
                formatter: '{value}',
                color: this.chartList1.colors[1],
                fontSize: 18,
              },
              nameTextStyle: {
                color: this.chartList1.colors[1],
                fontSize: 12,
              },
            },
          },
          // 系列配置
          series: {
            label: {
              show: true,
              position: 'top',
              fontSize: 14,
            },
            // 主系列配置
            primary: {
              name: this.chartList1.keyList[0],
              itemStyle: {
                color: this.chartList1.colors[0],
                normal: {
                  color: function (params) {
                    return params.data >= 0 ? _this.chartList1.colors[0] : '#ee6666';
                  },
                },
              },
            },
            // 柱状图通用配置
            bar: {
              barWidth: '40%',
              itemStyle: {
                color: this.chartList1.colors[0],
                normal: {
                  color: function (params) {
                    return params.data >= 0 ? _this.chartList1.colors[0] : '#ee6666';
                  },
                },
              },
              label: {
                show: true,
                position: 'top',
                fontSize: 18,
                formatter: `{c}${this.chartList1.unitList[0]}`,
              },
            },
            // 次系列配置
            secondary: {
              name: this.chartList1.keyList[1],
              itemStyle: {
                color: this.chartList1.colors[1],
              },
              label: {
                show: true,
                position: 'top',
                fontSize: 18,
                formatter: `{c}${this.chartList1.unitList[1]}`,
              },
            },
            // 折线图通用配置
            line: {
              itemStyle: {
                color: this.chartList1.colors[1],
              },
              lineStyle: {
                width: 2,
              },
              label: {
                show: true,
                position: 'top',
                fontSize: 18,
                formatter: `{c}${this.chartList1.unitList[1]}`,
              },
              smooth: true,
            },
          },
        },
        pptOptions: {
          // 图表位置和大小
          position: {
            x: 0.5,
            y: 0.8,
            w: 9,
            h: 3.5,
          },
          // 标题配置
          title: {
            x: 0.5,
            y: 0.5,
            fontSize: 24,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            // 图例配置
            showLegend: true,
            legendPos: 'b',
            // 分类轴配置
            catAxes: [{ catAxisTitle: this.chartList1.XShow }, { catAxisHidden: true }],
            dataLabelFormatCode: [
              `[${this.chartList1.data.map(item => item[this.chartList1.keyList[0]]).every(item => item < 0) ? '红色' : '黑色'}],##0.00${this.chartList1.unitList[0]}`,
              `[黑色]#,##0.00"${this.chartList1.unitList[1]}"`,
            ],
            // 显示数据标签
            showValue: true,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            // 值轴配置
            values: [
              {
                // 主值轴标题
                showValAxisTitle: false,
              },
              {
                // 次值轴标题
                showValAxisTitle: false,
              },
            ],
          },
        },
      };
    },
    /**
     * 导出为PPT
     * @description 将页面中的所有图表导出到PPT
     * @param {Object} pptx pptxgen实例
     * @param {Object} slide 当前幻灯片实例
     */
    exportToPPT(pptx, slide) {
      this.$refs.chart1.exportToPPT(pptx, slide);
      //卡片
      slide.addText(
        [
          {
            text: `${this.desc}`,
            options: {
              fontSize: 12,
              color: '363636',
            },
          },
        ],
        {
          shape: pptx.shapes.ROUNDED_RECTANGLE,
          x: 0.5,
          y: 4.5,
          w: 9,
          h: 0.8,
          rectRadius: 0.2,
          //边框
          line: { color: '151515', width: 0.5 },
          fill: { color: 'fff2ca' },
        }
      );
    },
  },
};
</script>

<style scoped lang="less">
.page-type-13 {
  width: 100%;
  height: 100%;
  .page-type-13-desc {
    .card-box-right-item-1 {
      font-size: 2rem;
    }
  }
  .card-box-container {
    justify-content: left;
  }
}
</style>
